<template>
	<view class="fresh-container">
		<!-- 自定义底部菜单 -->
		<dynamic-tabbar></dynamic-tabbar>
		
		<!-- 顶部搜索栏 -->
		<view class="search-header">
			<view class="location-info" @click="selectLocation">
				<text class="location-icon">📍</text>
				<text class="location-text">{{ currentLocation }}</text>
				<text class="arrow-icon">▼</text>
			</view>
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input 
					v-model="searchKeyword" 
					placeholder="搜索生鲜商品" 
					@confirm="onSearch"
					class="search-input"
				/>
			</view>
		</view>
		
		<!-- 生鲜分类 -->
		<view class="category-section">
			<scroll-view scroll-x class="category-scroll">
				<view 
					v-for="(category, index) in freshCategories" 
					:key="index"
					@click="selectCategory(category)"
					class="category-item"
					:class="{ active: selectedCategory === category.id }"
				>
					<text class="category-icon">{{ category.icon }}</text>
					<text class="category-name">{{ category.name }}</text>
				</view>
			</scroll-view>
		</view>
		
		<!-- 商品列表 -->
		<view class="product-list">
			<view v-if="filteredProducts.length === 0" class="empty-state">
				<text class="empty-icon">🥬</text>
				<text class="empty-text">暂无商品</text>
			</view>
			
			<view class="product-grid">
				<view 
					v-for="product in filteredProducts" 
					:key="product.id"
					@click="viewProduct(product)"
					class="product-item"
				>
					<image :src="product.image" class="product-image"></image>
					
					<view class="product-info">
						<text class="product-name">{{ product.name }}</text>
						<text class="product-desc">{{ product.description }}</text>
						
						<view class="product-price">
							<text class="current-price">¥{{ product.price }}</text>
							<text v-if="product.originalPrice" class="original-price">¥{{ product.originalPrice }}</text>
						</view>
						
						<view class="product-actions">
							<view class="quantity-control">
								<text @click.stop="decreaseQuantity(product)" class="quantity-btn">-</text>
								<text class="quantity">{{ product.quantity || 0 }}</text>
								<text @click.stop="increaseQuantity(product)" class="quantity-btn">+</text>
							</view>
						</view>
					</view>
					
					<view v-if="product.tag" class="product-tag">
						<text class="tag-text">{{ product.tag }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 购物车悬浮按钮 -->
		<view v-if="cartCount > 0" @click="goToCart" class="cart-float">
			<text class="cart-icon">🛒</text>
			<text class="cart-count">{{ cartCount }}</text>
		</view>
	</view>
</template>

<script>
import DynamicTabbar from '../../components/dynamic-tabbar.vue'

export default {
	components: {
		DynamicTabbar
	},
	data() {
		return {
			currentLocation: '北京市朝阳区',
			searchKeyword: '',
			selectedCategory: 0,
			freshCategories: [
				{ id: 0, name: '全部', icon: '🥬' },
				{ id: 1, name: '蔬菜', icon: '🥕' },
				{ id: 2, name: '水果', icon: '🍎' },
				{ id: 3, name: '肉类', icon: '🥩' },
				{ id: 4, name: '海鲜', icon: '🦐' },
				{ id: 5, name: '蛋奶', icon: '🥛' },
				{ id: 6, name: '豆制品', icon: '🫘' }
			],
			products: [
				{
					id: 1,
					name: '新鲜胡萝卜',
					description: '有机种植，营养丰富',
					image: '/static/images/carrot.jpg',
					price: 8.8,
					originalPrice: 12.8,
					category: 1,
					tag: '特价',
					quantity: 0
				},
				{
					id: 2,
					name: '红富士苹果',
					description: '脆甜多汁，产地直供',
					image: '/static/images/apple.jpg',
					price: 15.8,
					category: 2,
					quantity: 0
				},
				{
					id: 3,
					name: '新鲜牛肉',
					description: '优质牛肉，新鲜配送',
					image: '/static/images/beef.jpg',
					price: 45.8,
					category: 3,
					tag: '新品',
					quantity: 0
				}
			]
		}
	},
	computed: {
		filteredProducts() {
			if (this.selectedCategory === 0) {
				return this.products;
			}
			return this.products.filter(product => product.category === this.selectedCategory);
		},
		cartCount() {
			return this.products.reduce((total, product) => total + (product.quantity || 0), 0);
		}
	},
	methods: {
		selectLocation() {
			// 选择位置逻辑
		},
		onSearch() {
			// 搜索逻辑
		},
		selectCategory(category) {
			this.selectedCategory = category.id;
		},
		viewProduct(product) {
			uni.navigateTo({
				url: `/pages/goods/detail?id=${product.id}`
			});
		},
		increaseQuantity(product) {
			if (!product.quantity) {
				this.$set(product, 'quantity', 0);
			}
			product.quantity++;
		},
		decreaseQuantity(product) {
			if (product.quantity > 0) {
				product.quantity--;
			}
		},
		goToCart() {
			uni.navigateTo({
				url: '/pages/cart/index'
			});
		}
	}
}
</script>

<style scoped>
.fresh-container {
	padding-bottom: 60px; /* 为底部菜单留出空间 */
}

.search-header {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;
}

.location-info {
	display: flex;
	align-items: center;
	margin-right: 10px;
}

.location-icon {
	color: #27B387;
	margin-right: 5px;
}

.location-text {
	font-size: 14px;
	color: #333;
	margin-right: 5px;
}

.arrow-icon {
	font-size: 12px;
	color: #999;
}

.search-box {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 20px;
	padding: 8px 15px;
}

.search-icon {
	margin-right: 8px;
	color: #999;
}

.search-input {
	flex: 1;
	font-size: 14px;
	border: none;
	background: transparent;
}

.category-section {
	background-color: #fff;
	padding: 15px 0;
}

.category-scroll {
	white-space: nowrap;
}

.category-item {
	display: inline-block;
	text-align: center;
	margin: 0 15px;
	padding: 8px 12px;
	border-radius: 20px;
	background-color: #f8f8f8;
}

.category-item.active {
	background-color: #4CAF50;
	color: white;
}

.category-item.active .category-name {
	color: white;
}

.category-icon {
	font-size: 16px;
	margin-right: 5px;
}

.category-name {
	font-size: 12px;
	color: #333;
}

.product-list {
	padding: 15px;
}

.empty-state {
	text-align: center;
	padding: 50px 0;
}

.empty-icon {
	font-size: 48px;
	display: block;
	margin-bottom: 10px;
}

.empty-text {
	color: #999;
	font-size: 14px;
}

.product-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.product-item {
	position: relative;
	width: 48%;
	background-color: #fff;
	border-radius: 8px;
	margin-bottom: 15px;
	padding: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-image {
	width: 100%;
	height: 120px;
	border-radius: 8px;
	margin-bottom: 10px;
}

.product-info {
	flex: 1;
}

.product-name {
	font-size: 14px;
	font-weight: bold;
	color: #333;
	margin-bottom: 5px;
	display: block;
}

.product-desc {
	font-size: 12px;
	color: #666;
	margin-bottom: 8px;
	display: block;
}

.product-price {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.current-price {
	font-size: 16px;
	font-weight: bold;
	color: #ff4757;
	margin-right: 8px;
}

.original-price {
	font-size: 12px;
	color: #999;
	text-decoration: line-through;
}

.product-actions {
	display: flex;
	justify-content: flex-end;
}

.quantity-control {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 15px;
	padding: 2px;
}

.quantity-btn {
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background-color: #4CAF50;
	color: white;
	text-align: center;
	line-height: 24px;
	font-size: 16px;
	font-weight: bold;
}

.quantity {
	min-width: 30px;
	text-align: center;
	font-size: 14px;
	color: #333;
}

.product-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: #ff4757;
	border-radius: 4px;
	padding: 2px 6px;
}

.tag-text {
	font-size: 10px;
	color: white;
}

.cart-float {
	position: fixed;
	bottom: 70px;
	right: 20px;
	width: 50px;
	height: 50px;
	background-color: #4CAF50;
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	z-index: 999;
}

.cart-icon {
	font-size: 20px;
	color: white;
}

.cart-count {
	position: absolute;
	top: -5px;
	right: -5px;
	background-color: #ff4757;
	color: white;
	font-size: 10px;
	border-radius: 10px;
	min-width: 18px;
	height: 18px;
	text-align: center;
	line-height: 18px;
}
</style>